<template>
  <div class="mapping_add_update">
    <el-popover placement="bottom"
                width="230"
                v-model="popShow"
                ref="newReportPoper"
                @hide="hidePopover"
                popper-class="manage_accounts_addtemp">
      <el-form :model="dataForm"
               :rules="dataRule"
               :inline="false"
               ref="newReportDataForm"
               @submit.native.prevent
               label-width="80px"
               label-position="top">
        <el-form-item prop="name"
                      :label="$t('custom.reports.name')">
          <el-input :placeholder="$t('custom.mapping.enter')"
                    v-model="dataForm.name">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
                     size="small"
                     @click="dataFormSubmitHandle()">{{title==='add'? $t('custom.workSchedule.template.addBtn'): $t('custom.attendance.timeEntry.saveBtn')}}</el-button>
        </el-form-item>
      </el-form>
      <span slot="reference"
            class="accounts_btn "
            :class="title==='add'?'add_btn':'edit_btn'"
            @click="editAccountGp($event)"></span>
    </el-popover>
  </div>
</template>
<script>
// import { isIncludeSymbol } from '@/utils/validate'
export default {
  data () {
    return {
      dataForm: { name: '' },
      popShow: false,
      falg: true
    }
  },
  props: {
    popData: {
      typeof: Object
    },
    visibel: {
      typeof: String
    },
    node: {
      typeof: Object
    },
    event: {
      typeof: Object
    },
    account: {
      typeof: Object
    },
    title: {
      typeof: String
    }
  },
  created () {
    if (this.title === 'edit') this.dataForm.name = this.popData.label
  },
  watch: {
    visibel: {
      immediate: true,
      handler (val) {
        this.popShow = false
      }
    }
  },
  computed: {
    dataRule () {
      // var validateSymbol = (rule, value, callback) => {
      //   if (!isIncludeSymbol(value)) {
      //     return callback(new Error(this.$t('validate.isIncludeSymbol')))
      //   }
      //   callback()
      // }
      return {
        name: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur', pattern: '[^ \x22]+' },
          { validator: this.limitNameLength, trigger: 'blur' }
          // { validator: validateSymbol, trigger: 'blur' },
          // { validator: this.validatePass, trigger: 'blur' }
        ]
        // roleIdList: [
        //   { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        // ]
      }
    }
  },
  methods: {
    dataFormSubmitHandle () {
      let params
      if (this.title === 'edit') {
        params = {
          label: this.dataForm.name,
          id: this.popData.id ? this.popData.id : '',
          accountId: this.account.id
        }
      } else {
        params = {
          label: this.dataForm.name,
          pid: this.popData.id ? this.popData.id : '',
          accountId: this.account.id
        }
      }
      this.$refs['newReportDataForm'].validate().then(() => {
        if (this.title === 'edit') this.updateAccount(params, this.popData.id)
        else this.addTopNodeAccount(params)
      })
    },
    limitNameLength (rule, value, callback) {
      if (value.length > 256) callback(new Error('Limit the name within 256 characters'))
      callback()
    },
    editAccountGp (e) {
      this.$refs.newReportPoper.doClose()
      this.$emit('setCurrNodeKey', this.popData.id)
      document.querySelectorAll('.manage_accounts_addtemp').forEach(element => {
        element.style.display = 'none'
      })
      e.stopPropagation()
    },
    updateAccount (params, id) {
      if (this.falg) {
        this.falg = false
        this.$interface.mapping.updateAccount(params, id).then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.$emit('refreshList')
          this.$emit('refreshTempList')
          this.falg = true
          this.popShow = false
        }).catch(() => { this.falg = true })
      }
    },
    hidePopover () {
      this.$refs.newReportDataForm.resetFields()
    },
    addTopNodeAccount (params) {
      if (this.falg) {
        this.falg = false
        this.$interface.mapping.addAccount(params).then(({ data: res }) => {
        // this.addLoading = false
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.$emit('refreshList')
          this.$emit('refreshTempList')
          this.falg = true
          this.popShow = false
        }).catch(() => {
        // this.addLoading = false
          this.falg = true
        })
      }
      // this.addLoading = true
    }
  }
}
</script>
<style lang="scss">
</style>
